import { Button, App, Spin, Input, Select, DatePicker } from 'antd'
import { CoverPanel } from '@/desktop/views/app/cover-panel'
import { getTasks, type Task, useSearch, type Search, Target, Status } from '../logics'

export function SearchForm({
  search,
  setSearch: rawSetSearch,
}: {
  search: Search
  setSearch: (updates: Search) => void
}) {
  const setSearch = (updates: Search) => rawSetSearch({ ...search, ...updates })
  const resetSearch = () => rawSetSearch({})

  return <div css={s.search}>
    <div>
      <label>任务名称</label>
      <Input
        placeholder="按任务名称筛选"
        value={search.name}
        onChange={e => setSearch({ name: e.target.value.trim() })}
      />
    </div>
    <div>
      <label>群发对象</label>
      <Select
        options={[Target.全部客户, Target.标签客户, Target.群].map(type => ({
          value: type,
          label: Target[type as Target.全部客户],
        }))}
        placeholder="筛选群发对象"
        allowClear
        value={search.targetType}
        onChange={type => setSearch({ targetType: type })}
      />
    </div>
    <div>
      <label>任务创建时间</label>
      <DatePicker.RangePicker
        style={{ width: '200px' }}
        allowEmpty={[true, true]}
        showTime
        value={search.createdRange}
        onChange={value => setSearch({ createdRange: value ?? undefined })}
      />
    </div>
    <div>
      <label>任务开始时间</label>
      <DatePicker.RangePicker
        style={{ width: '200px' }}
        allowEmpty={[true, true]}
        showTime
        value={search.startAtRange}
        onChange={value => setSearch({ startAtRange: value ?? undefined })}
      />
    </div>
    <div>
      <label>任务状态</label>
      <Select
        options={[Status.未开始, Status.发送中, Status.已完成, Status.已取消].map(status => ({
          value: status,
          label: Status[status as Status.未开始],
        }))}
        placeholder="筛选任务状态"
        allowClear
        value={search.status}
        onChange={status => setSearch({ status })}
      />
    </div>
    <div css={s.reset}>
      <Button onClick={resetSearch} type="primary">
        重置筛选
      </Button>
    </div>
  </div>
}

const s = {
  search: css`
    column-gap: 20px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    row-gap: 16px;
    & > div {
      label {
        display: block;
        font-size: 13px;
        margin-bottom: 8px;
      }
      label + * {
        width: 180px;
      }
    }
  `,
  reset: css`
    align-items: flex-end;
    display: flex;
  `,
}
